<template>
    <v-app id="inspire">
        <!-- <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
            <v-list dense>
                <template v-for="item in items">
                    <v-row v-if="item.heading" :key="item.heading" align="center">
                        <v-col cols="6">
                            <v-subheader v-if="item.heading">
                                {{ item.heading }}
                            </v-subheader>
                        </v-col>
                        <v-col cols="6" class="text-center">
                            <a href="#!" class="body-2 black--text">EDIT</a>
                        </v-col>
                    </v-row>
                    <v-list-group v-else-if="item.children" :key="item.text" v-model="item.model" :prepend-icon="item.model ? item.icon : item['icon-alt']" append-icon="">
                        <template v-slot:activator>
                            <v-list-item-content>
                                <v-list-item-title>
                                    {{ item.text }}
                                </v-list-item-title>
                            </v-list-item-content>
                        </template>
                        <v-list-item v-for="(child, i) in item.children" :key="i" link>
                            <v-list-item-action v-if="child.icon">
                                <v-icon>{{ child.icon }}</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>
                                    {{ child.text }}
                                </v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list-group>
                    <v-list-item v-else :key="item.text" link>
                        <v-list-item-action>
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title>
                                {{ item.text }}
                            </v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </template>
            </v-list>
        </v-navigation-drawer> -->

        <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="blue darken-3" dark>
            <v-text-field @keyup.enter="click" @click:append="click" flat solo-inverted hide-details append-icon="mdi-magnify" label="在此输入chatid" v-model="chatid"></v-text-field>
        </v-app-bar>

        <v-app-bar app color="deep-purple darken-3" dark style="margin-top:56px" v-if="title">
            <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
            <span class="ma-2">名称:{{title}}</span>
            <span class="ma-2">数据条数:{{listLength}}</span>
            <span class="ma-2">当前页码:{{page}}</span>
        </v-app-bar>

        <v-main>

            <router-view ref="router" @listLength='fnlistLength' @title="fntitle" @page="fnpage"></router-view>
        </v-main>
        <!-- <v-btn bottom color="pink" dark fab fixed right @click="dialog = !dialog">
            <v-icon>mdi-plus</v-icon>
        </v-btn> -->
        <!-- <v-dialog v-model="dialog" width="800px">
            <v-card>
                <v-card-title class="grey darken-2">
                    Create contact
                </v-card-title>
                <v-container>
                    <v-row class="mx-2">
                        <v-col class="align-center justify-space-between" cols="12">
                            <v-row align="center" class="mr-0">
                                <v-avatar size="40px" class="mx-3">
                                    <img src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png" alt="">
                                </v-avatar>
                                <v-text-field placeholder="Name"></v-text-field>
                            </v-row>
                        </v-col>
                        <v-col cols="6">
                            <v-text-field prepend-icon="mdi-account-card-details-outline" placeholder="Company"></v-text-field>
                        </v-col>
                        <v-col cols="6">
                            <v-text-field placeholder="Job title"></v-text-field>
                        </v-col>
                        <v-col cols="12">
                            <v-text-field prepend-icon="mdi-mail" placeholder="Email"></v-text-field>
                        </v-col>
                        <v-col cols="12">
                            <v-text-field type="tel" prepend-icon="mdi-phone" placeholder="(000) 000 - 0000"></v-text-field>
                        </v-col>
                        <v-col cols="12">
                            <v-text-field prepend-icon="mdi-text" placeholder="Notes"></v-text-field>
                        </v-col>
                    </v-row>
                </v-container>
                <v-card-actions>
                    <v-btn text color="primary">More</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
                    <v-btn text @click="dialog = false">Save</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog> -->
    </v-app>
</template>

<script>
    export default {
        props: {
            source: String,
        },
        data: () => ({
            dialog: false,
            drawer: null,
            chatid: '',//-451162841
            listLength: 0,
            page: 1,
            title: ''
        }),
        methods: {
            click() {
                console.log(this.chatid)
                this.$router.push({path:'/'})
                this.$refs.router.getList(this.chatid, 1)
                // 
            },
            fnlistLength(e) {
                console.log(e)
                this.listLength = e
            },
            fntitle(e) {
                this.title = e
            },
            fnpage(e) {
                this.page = e
            }
        },
    }
</script>